<template>
	<view class="page-member-course">
		<MxMemberCourseCard v-for="course in courseList" :course="course" />
		<EmptyData v-if="!hasCourse" />
	</view>
</template>

<script>
	import MxMemberCourseCard from '@/components/mine/member-course/MxMemberCourseCard.vue'
	import EmptyData from '@/components/common/EmptyData.vue'
	import * as courseApi from '@/api/course.js'
	
	export default {
		components: {
			MxMemberCourseCard,
			EmptyData
		},
		data() {
			return {
				courseList: []
			};
		},
		computed: {
			hasCourse() {
				return this.courseList.length !== 0
			}
		},
		onLoad() {
			courseApi.userCourse().then(res => {
				this.courseList = res.data
			})
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/scss/mixins.scss';
	@import '@/common/scss/var.scss';

	page {
		background-color: $page-bg-color;
	}

	.page-member-course {
		box-sizing: border-box;
		width: 100%;
		padding: 0 24rpx;
		padding-top: 64rpx;
	}
</style>
